<template>
  <div class="head-info">
    <el-row>
      <el-col :span="3" :offset="4">
        <div class="share">
          <a href="http://service.weibo.com/share/share.php?appkey=&title=一站式落户：http://47.105.173.220:8080/leshuo/index&url=&searchPic=false&style=simple" target="_blank"><i class="fa fa-weibo"></i></a>
          <a href="tencent://message/?uin=870430503&Site=Sambow&Menu=yes" target="_blank"><i class="fa fa-qq"></i></a>
          <a @mouseenter="showWeinxin" target="_blank" @mouseleave="onMouseLeave"><i class="fa fa-weixin"></i></a>
          <div v-if="showImg" class="share-img"><img src="/static/images/weixin/weixin.png"/></div>
        </div>
      </el-col>
      <el-col :span="8">
        <el-button-group>
          <el-button @click="openRouter('/about')">关于我们</el-button>
          <el-button @click="openRouter('/serviceProject')">服务项目</el-button>
          <el-button @click="openRouter('/condition')">中国钇企财富</el-button>
          <el-button @click="openRouter('/news')">新闻资讯</el-button>
        </el-button-group>
      </el-col>
      <el-col :span="7">
        <div class="share">
          <a>服务热线：<i class="fa fa-phone">{{tel}}</i></a>
        </div>
      </el-col>
      <el-col :span="2">
        <el-button type="text" class="fa fa-user" @click="openManageSys">管理员</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  name: 'head-info',
  props: {
    tel: String
  },
  data() {
    return {
      searchText: '',
      showImg: false
    };
  },
  methods: {
    openRouter(url) {
      this.$router.push(url);
    },
    showWeinxin() {
      this.showImg = true;
    },
    onMouseLeave() {
      this.showImg = false;
    },
    openManageSys() {
      if (process.env.NODE_ENV === 'production') {
        window.location.href = '/login/index';
      } else {
        window.location.href = '/login';
      }
    }
  }
};
</script>
<style scoped>
  .head-info {
    border-bottom: 1px solid #EBEBEB;
  }
  .share {
    margin-top: 8px;
  }
  a {
    padding-left: 20px;
    color: #8c939d;
  }
  a:hover {
    color: #db9d36;
  }
  .share-img {
    z-index: 113;
    height: 10px;
    left: 52%;
    margin-right: 40%;
    position: relative;
  }
</style>
